<template>
  <view class="bg-white">
    <kui-easy-form ref="refDynamicReport" :option="option" :formConfig="formConfig">
      <template v-slot:customItem="{ itemOps }">
        <view style="
            border-radius: 10px;
            border: 2px solid #2979ff;
            margin: 6px;
            overflow: hidden;
          ">
          <u-cell v-if="itemOps.cusType == 'switch'" :title="itemOps.label" :required="true" :border="false">
            <template #icon>
              <u-text v-if="itemOps.required" text="*" color="red" bold></u-text>
            </template>
            <template #title>
              <u-text :text="itemOps.label"></u-text>
            </template>
            <u-switch slot="value" :disabled="itemOps.disabled" ></u-switch>
          </u-cell>
          <u-alert type="warning" title="custom 自定义组件"
            description="这是通过插槽，在外部定义的组件, 需要再适当的时候进行方法调用，或自行处理元表单数据"></u-alert>
        </view>
      </template>
    </kui-easy-form>

    <!-- <kuiFloatButton icon="eye" text="预览当前表单数据" color="#004eff" bottom="120rpx" right="20px" @click="preView"
      boxShadow="1px 1px 10px #004eff" /> -->

    <!-- <u-popup mode="bottom" :show="demo.popshow" closeable @close="demo.popshow = false">
      <view style="padding: 10px; max-height: 70vh; overflow: scroll">
        <u-parse :content="demo.content"></u-parse>
      </view>
    </u-popup> -->
  </view>
</template>

<script setup>



import { reactive } from 'vue';
import configFile from './exampleConfig';
import { onLoad } from '@dcloudio/uni-app';
const formConfig = reactive({
  showSubmitBtn: true,
  beforeSubmitHook: (postData) => {
    //---- 处理特殊字段 (一些接口需要特殊复杂的的数据)
    // postData.customerData = [1,2,{a:2}];
    //----
    return postData;
  },
  mode: 'add',
  cusData: {
    // 自定义数据 - 页面类型 （在此 用与判断是否显示“参与部门”）
    pageType: 'my',
  },
});

const pageStatus = reactive({
  id: '',
  mode: 'add',
});

const option = reactive(configFile());

onLoad((opt) => {
  // pageStatus.id = opt.id || '';
  // pageStatus.mode = opt.mode;
})

const cusItemOps = reactive({
  postValue: "",
})

</script>

<style lang="scss"></style>
